<template>
  <!-- header表头 -->
  <div class="" style="position: absolute;z-index: 999;width: 100%;padding: 0 160px;">
    <b-container fluid>
      <b-navbar toggleable="lg" type="dark" class="navbar">
        <b-navbar-brand href="/">
          <b-img src="/img/logo.png" width="155" fluid alt="新投集团" @click=""></b-img>
        </b-navbar-brand>
        <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
        <b-collapse id="nav-collapse" is-nav>
          <b-navbar-nav class="ml-auto">
            <el-row v-if="!show_links_">
              <nuxt-link :to="'login?id=login'"><el-button type="primary" class="nav_btn">应聘端登录</el-button></nuxt-link>
              <a :href="'http://218.203.249.89:8003'"><el-button type="primary"
                  class="nav_btn">企业端登录</el-button></a>
              <!-- <nuxt-link :to="'login?id=register'"> <el-button type="primary" class="nav_btn">注册</el-button></nuxt-link> -->
            </el-row>
            <div class="right_nav" right v-else>
              <nuxt-link :to="'index2'">
                <el-avatar v-if="!photoUrl" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                <el-avatar v-if="photoUrl" :src="photoUrl" />
              </nuxt-link>
              <span class="nav_span">{{ nickName||"无名氏" }}</span>
              <el-popover placement="bottom" width="280" trigger="click">
                <div class="">
                  <nuxt-link :to="'account'">
                    <div class="flex login_out">
                      <img src="/img/zhanghu.png" alt="">
                      账号管理
                    </div>
                  </nuxt-link>
                  <nuxt-link :to="'my'">
                    <div class="flex login_out">
                      <img src="/img/jianli.png" alt="">
                      我的简历
                    </div>
                  </nuxt-link>
                  <div class="flex login_out" @click="unLogin()">
                    <img src="/img/power.png" alt="">
                    退出登录
                  </div>
                </div>
                <img class="image1" slot="reference" src="/img/power.png" alt="">
              </el-popover>
            </div>
          </b-navbar-nav>
        </b-collapse>
      </b-navbar>
    </b-container>
  </div>
</template>
<script>
export default {
  name: 'top_nav',
  props: {
    show_links: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      show_links_: false,
      Information: {},
      nickName:"",
      photoUrl: null
    }
  },
  mounted() {
    this.show_links_ = sessionStorage.getItem("loginBool") ? sessionStorage.getItem("loginBool") : false
    this.Information = JSON.parse(sessionStorage.getItem("myInfornation"))?.user
    this.nickName = JSON.parse(sessionStorage.getItem("myInfornation"))?.resumeVo?.personalInformation?.fullName
    this.photoUrl = JSON.parse(sessionStorage.getItem("myInfornation"))?.resumeVo?.personalInformation?.photoUrl
    console.log("个人信息：", this.Information);
  },
  methods: {
    unLogin() {
      this.$confirm('是否退出登录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        sessionStorage.removeItem("loginBool")
        sessionStorage.removeItem("myInfornation")
        this.$router.push("login?id=login")
        setTimeout(() => {
          location.reload()
        }, 100);
        this.$message({
          type: 'success',
          message: '已登出!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });

    }
  }
}

</script>
<style scoped lang="scss">
.show_index {
  @media (min-width: 1400px) {
    visibility: hidden;
  }
}

.navbar {
  padding: 16px 0px 28px 0px;
}

.login_out {
  width: 260px;
  height: 36px;
  background: #FFFFFF;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  align-items: center;

  &:hover {
    background: #ECF5FF;
  }

  img {
    width: 15px;
    height: 13px;
    margin-right: 10px;
  }

  font-size: 14px;
  font-family: 'Microsoft YaHei-Regular, Microsoft YaHei';
  font-weight: 400;
  color: #232327;
}

.right_nav {
  display: flex;
  align-items: center;

  .dropdown-menu {
    width: 280px;
    height: 132px;
    background: #FFFFFF;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.102);
    border-radius: 8px 8px 8px 8px;
    opacity: 1;
  }
}

.nav_span {
  margin-left: 8px;
  margin-right: 10px;
  font-size: 16px;
  font-family: 'Source Han Sans CN-Medium, Source Han Sans CN';
  font-weight: 500;
  color: #232327;
  line-height: 16px;
  // -webkit-background-clip: text;
  // -webkit-text-fill-color: transparent;
}

.nav_btn {
  // width: 70px;
  height: 40px;
  background: #2F6CBC;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;

}

.image1 {
  width: 20px;
  height: 20px;

}

.item_nav {
  margin-top: 10px;
  margin-right: 40px;
}
</style>
